@import "style";
@color: white;
@rem: 1/200rem;
@fontSize:#0061b2;
body{
    .bgColor(#f0f0f0);
}
.center{
    margin: 0 auto;
};
.button{
    .wh(156*@rem,64*@rem);
    margin: 0 auto;
    display: block;
    background-image: url("../images/btn.png");
    background-size: 100% 100%;
    .lineH(64*@rem);
    color: #002f73;
    .fs(24*@rem);
}
.Expenses_index_bg{
    .abs();
    .wh(100%,100%);
    background: url(../images/bg_01.jpg) top center no-repeat;
    background-size: 100% 100%;
    .Expenses_moon{
        .wh(469*@rem,469*@rem);
        .center();
        .mt(22*@rem);
        background: url(../images/moon.png) top center no-repeat;
        background-size: 100%;
        .rel();
        .icon1{
            .wh(118*@rem,110*@rem);
            background: url(../images/icon_1.png) top center no-repeat;
            background-size: 100%;
            .abs();
            -webkit-animation: scale 2s linear infinite;
            animation: scale 2s linear infinite;
        }
        .icon2{
            .wh(67*@rem,70*@rem);
            background: url(../images/icon_2.png) top center no-repeat;
            background-size: 100%;
            .absR(70*@rem,50*@rem);
            -webkit-animation: scale 2s 500ms linear infinite;
            animation: scale 2s 500ms linear infinite;
        }
        .icon3{
            .wh(97*@rem,100*@rem);
            background: url(../images/icon_3.png) top center no-repeat;
            background-size: 100%;
            .absRB();
            -webkit-animation: scale 2s 1.5s linear infinite;
            animation: scale 2s 1.5s linear infinite;
        }
        .icon4{
            .wh(39*@rem,41*@rem);
            background: url(../images/icon_4.png) top center no-repeat;
            background-size: 100%;
            .absB(50*@rem,90*@rem);
            -webkit-animation: scale 2s 2s linear infinite;
            animation: scale 2s 2s linear infinite;
        }
    }
    .Expenses_bg_icon{
        .wh(519*@rem,455*@rem);
        .center();
        background-image: url(../images/bg_icon_1.png);
        background-size: 100% 100%;
        .bg_input{
            .rel();
            .title{
                .tc();
                color: @color;
                .fs(24*@rem);
                .pt(20*@rem);
                .mb(55*@rem);
            }
            .input{
                .wh(340*@rem,62*@rem);
                .bgColor(@color);
                .center();
                border-radius: 10*@rem;
                .mt(22*@rem);
                &>label{
                    .w(30%);
                    .fs(22*@rem);
                    color: @fontSize;
                    text-indent: 1em;
                    display: inline-block;
                    vertical-align: middle;
//                  box-sizing: border-box;
                }
                &>input{
                    display: inline-block;
                    .w(65%);
                    .fs(22*@rem);
                    .lineH(62*@rem);
                    text-indent: 1em;
                    color: @fontSize;
                    vertical-align: middle;
                    box-sizing: border-box;
                    .of();
                    &::-webkit-input-placeholder{
                        .fs(22*@rem);
                        color: @fontSize;
                    }
                }
            }
            .btn_area{
                .w(340*@rem);
                .rel();
                .center();
                .mt(40*@rem);
                .to_login{
                    .button();
                    .fr();
                }
                .to_modify{
                    .button();
                    .fl();
                }
            }
        }
    }
}
@-webkit-keyframes scale {
    0%{
        opacity: 0;
        -webkit-transform:scale(0);
    }
    
    100%{
        opacity: 1;
        -webkit-transform:scale(1.2);
    }
}

@keyframes scale {
    0%{
        opacity: 0;
        -webkit-transform:scale(0);
    }
    
    100%{
        opacity: 1;
        -webkit-transform:scale(1.2);
    }
}

.scale {
    -webkit-animation-name: scale;
    animation-name: scale;
}
